<script setup lang="ts">
import { Check,Delete,Edit,Message,Search,Star,} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getCompany , deleteCompany,addCompany,findById,updateCompany} from '@/api/BusinessManagement';
import { onMounted, reactive ,ref, toRaw  } from 'vue';
import { ComponentSize, FormInstance, FormRules } from 'element-plus'
// import type { ComponentSize } from 'element-plus'
import { log } from 'console';

//删除弹出框
const  dele =async (id:any) => {
    ElMessageBox.confirm(
    '确定要删除该企业?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
        await deleteCompany(id);
        await getInfo();
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
};


//分页参数信息
var state= reactive({
   tableData:[],
  pageInfo:{
    pageNum:1,
    pageSize:10,
    search:''
  },
  total:ref(0)

})  
// 分页
// const currentPage4 = ref(4)
const pageSize4 = ref(4)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  state.pageInfo.pageSize=val;
  state.pageInfo.pageNum = 1; // 重置为第一页
  getInfo();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  state.pageInfo.pageNum=val;
  
  getInfo();
}
getInfo();

//新增二级弹窗
var dialogFormVisible = ref(false)
var updateFormVisible = ref(false)
const formLabelWidth = '70px'

//新增表单
var form = reactive({
    name: '',
  shortName: '',
  companyType: '',
  phone: '',
  address:'',
  admin:'',
  companyPrincipal:'',
  principalPhone:'',
  remark:'',
  website:'',
  adminPhone:'',
//   delivery: false,
//   type: [],
//   resource: '',
//   desc: '',
})

//修改表单
var updateform = reactive({
    id:0,
    name: '',
  shortName: '',
  companyType: '',
  phone: '',
  address:'',
  admin:'',
  companyPrincipal:'',
  principalPhone:'',
  remark:'',
  website:'',
  adminPhone:'',
//   delivery: false,
//   type: [],
//   resource: '',
//   desc: '',
})

//设置新增弹框必填项规则
const formRules = {
  name: [
    { required: true, message: '公司名称为必填项', trigger: 'blur' }
  ],
  companyPhone: [
    { required: true, message: '公司电话为必填项', trigger: 'blur' },
    // { type: 'companyPhone', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] }
  ],
  address:[
    {required: true, message:'公司地址为必填项',trigger:'blur'}
  ],
  phone:[
    {required: true, message: '公司电话为必填项', trigger: 'blur' },
    { 
    pattern: /^(?:(?:\d{3}-)?\d{8}|(?:\d{4}-)?\d{7,8}|\d{11})$/, 
    message: '请输入有效的电话号码（格式如：123-12345678、1234-1234567、12345678901等）', 
    trigger: 'blur' 
  }
  ],
  companyPrincipal:[
        {required: true, message: '公司负责人为必填项', trigger: 'blur' }
  ],
  principalPhone:[
        {required: true, message: '责任人电话为必填项', trigger: 'blur' }
  ]
};
// 定义表单引用
const formRef = ref();

//新增相关函数
function add(){
    form.name = ''
            form.shortName = ''
            form.companyType = ''
            form.phone = ''
            form.address = ''
            form.admin = ''
            form.companyPrincipal = ''
            form.principalPhone = ''
            form.remark = ''
            form.website = ''
            form.adminPhone = ''
    dialogFormVisible.value = true;
}
const addok = () => {
    dialogFormVisible.value = false;
    formRef.value.validate (
        async(valid: any) => {
            
        if (valid) {
            // console.log('表单校验通过，提交数据：', form);
            // 这里可以添加实际的提交逻辑，如发送请求等
            await addCompanys(form)
            console.log(form);
            form.name = ''
            form.shortName = ''
            form.companyType = ''
            form.phone = ''
            form.address = ''
            form.admin = ''
            form.companyPrincipal = ''
            form.principalPhone = ''
            form.remark = ''
            form.website = ''
            form.adminPhone = ''

        } else {
            console.log('表单校验不通过');
            return false;
        }
    });
};
//发送新增请求
async function addCompanys(companyAddDTO:any){
         await addCompany(companyAddDTO);
             getInfo();
}

//修改相关函数
async function update(id:any){
    var {data:{data}} = await findById(id)
    updateform.id = id
    updateform.name = data.name
    updateform.shortName = data.shortName
    updateform.companyType = data.companyType
    updateform.phone = data.phone
    updateform.address = data.address
    updateform.admin = data.admin
    updateform.companyPrincipal = data.companyPrincipal
    updateform.principalPhone = data.principalPhone
    updateform.remark = data.remark
    updateform.website = data.website
    updateform.adminPhone = data.adminPhone
    updateFormVisible.value = true;
}
//发送修改请求
async function updateRequest(companyUpdateDTO:any) {
    await updateCompany(companyUpdateDTO)
    await getCompany(state.pageInfo)
}
//确认修改
const updateok = () => {
    updateFormVisible.value = false;
    formRef.value.validate (
        async(valid: any) => {
        if (valid) {
            console.log('表单校验通过，提交数据：', form);
            // 这里可以添加实际的提交逻辑，如发送请求等 
            await updateRequest(updateform)
        } else {
            console.log('表单校验不通过');
            return false;
        }
        getInfo();
    });
    
};


//失去焦点函数
async function handleBlur(){
    getInfo();
}

// 发送渲染数据请求
async function getInfo() {
    console.log(state.pageInfo);
    const search = {
        name: state.pageInfo.search,
        pageNum:state.pageInfo.pageNum,
        pageSize: state.pageInfo.pageSize,
    }
    console.log(search);
    
//  var {data:{data}} = await getCompany(state.pageInfo)
 var {data:{data}} = await getCompany(search)     
 state.tableData = data.rows
 state.total = data.total
//  search: encodeURIComponent(state.pageInfo.search)
 console.log(data);
}

// 挂载函数
onMounted(() => {
 getInfo();
});

</script>

<template>
    <!-- 搜索框 -->
    <el-input class="input" style="width: 240px" placeholder="请输入公司名称" @blur="handleBlur" v-model="state.pageInfo.search"/>

    <!-- 新增按钮 -->
    <div class="mb-4">
        <el-button plain @click="add">+新增</el-button>
    </div>

    <!-- 新增二级弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="新增仪表" width="800" height="200">
        
            <el-row>
                <el-col :span="Number('12')">
                    <el-form :model="form" :rules="formRules" ref="formRef">
                     <el-form-item label="公司名称"  prop="name">
                        <el-input v-model="form.name" autocomplete="off" placeholder="请输入" class="i-input" />
                     </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="Number('12')">
                    <el-form-item label="公司简称"  prop="shortName">
                        <el-input v-model="form.shortName" autocomplete="off" placeholder="请输入" class="i-input" />
                    </el-form-item>
                </el-col>
            </el-row>
          <el-form :model="form" :rules="formRules" ref="formRef">
            <el-form-item label="公司地址" prop="address">
                <el-input v-model="form.address" placeholder="请输入" style="width:600px;"></el-input>
            </el-form-item>
         </el-form>

            <el-row>
                <el-col :span="Number('12')">
                    <el-form :model="form" :rules="formRules" ref="formRef">
                        <el-form-item label="公司类型" prop="companyType">
                            <el-input v-model="form.companyType" placeholder="请输入" class="i-input"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>

                <el-col :span="Number('12')">
                    <el-form :model="form" :rules="formRules" ref="formRef">  
                     <el-form-item label="公司电话" prop="phone">
                        <el-input v-model="form.phone" placeholder="请输入" class="i-input"></el-input>
                     </el-form-item>
                    </el-form> 
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="Number('12')">
                    <el-form :model="form" :rules="formRules" ref="formRef">
                        <el-form-item label="公司管理员" prop="admin">
                            <el-input v-model="form.admin" placeholder="请输入" class="i-input"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>

                <el-col :span="Number('12')">
                    <el-form-item label="管理员电话" prop="adminPhone">
                        <el-input v-model="form.adminPhone" placeholder="请输入" class="i-input"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="Number('12')">
                    <el-form :model="form" :rules="formRules" ref="formRef">
                        <el-form-item label="公司负责人" prop="companyPrincipal">
                            <el-input v-model="form.companyPrincipal" placeholder="请输入" class="i-input"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>

            <el-col :span="Number('12')">
                <el-form :model="form" :rules="formRules" ref="formRef">  
                    <el-form-item label="负责人电话" prop="principalPhone">
                        <el-input v-model="form.principalPhone" placeholder="请输入" class="i-input"></el-input>
                    </el-form-item>
                </el-form>
             </el-col>
            </el-row>

            <el-row>
                <el-col :span="Number('12')">
                    <el-form :model="form" :rules="formRules" ref="formRef">
                        <el-form-item label="备注信息" prop="remark">
                            <el-input v-model="form.remark" placeholder="请输入" class="i-input"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>

                <el-col :span="Number('12')">
                    <el-form-item label="公司网址" prop="website">
                        <el-input v-model="form.website" placeholder="请输入" class="i-input"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
      
        <!-- 新增确认框 -->
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addok">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 修改二级弹窗 -->
    <el-dialog v-model="updateFormVisible" title="修改仪表" width="800" height="200">
            <el-row>
                <el-col :span="Number('12')">
                    <el-form :model="updateform" :rules="formRules" ref="formRef">
                       <el-form-item label="公司名称"  prop="name">
                        <el-input v-model="updateform.name"  placeholder="请输入" class="i-input" />
                      </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="Number('12')">
                    <el-form-item label="公司简称" prop="shortName">
                        <el-input v-model="updateform.shortName" autocomplete="off" placeholder="请输入" class="i-input" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form :model="updateform" :rules="formRules" ref="formRef">
                <el-form-item label="公司地址" prop="address">
            
                   <el-input v-model="updateform.address" placeholder="请输入" style="width:600px;"></el-input>
                   <!-- <div id="allMap"></div> -->
                
                 </el-form-item>
             </el-form>


            <el-row>
                <el-col :span="Number('12')">
                    <el-form :model="updateform" :rules="formRules" ref="formRef">
                        <el-form-item label="公司类型" prop="companyType">
                            <el-input v-model="updateform.companyType" placeholder="请输入" class="i-input"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>

                <el-col :span="Number('12')">
                    <el-form :model="updateform" :rules="formRules" ref="formRef">
                     <el-form-item label="公司电话" prop="phone">
                        <el-input v-model="updateform.phone" placeholder="请输入" class="i-input"></el-input>
                     </el-form-item>
                    </el-form>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="Number('12')">
                    <el-form :model="updateform" :rules="formRules" ref="formRef">
                        <el-form-item label="公司管理员" prop="admin">
                            <el-input v-model="updateform.admin" placeholder="请输入" class="i-input"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>

                <el-col :span="Number('12')">
                    <el-form-item label="管理员电话" prop="adminPhone">
                        <el-input v-model="updateform.adminPhone" placeholder="请输入" class="i-input"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="Number('12')">
                    <el-form :model="updateform" :rules="formRules" ref="formRef">
                        <el-form-item label="公司负责人" prop="companyPrincipal">
                            <el-input v-model="updateform.companyPrincipal" placeholder="请输入" class="i-input"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>

                <el-col :span="Number('12')">
                    <el-form :model="updateform" :rules="formRules" ref="formRef">
                      <el-form-item label="负责人电话" prop="principalPhone">
                        <el-input v-model="updateform.principalPhone" placeholder="请输入" class="i-input"></el-input>
                      </el-form-item>
                    </el-form>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="Number('12')">
                    <el-form :model="updateform" :rules="formRules" ref="formRef">
                        <el-form-item label="备注信息" prop="remark">
                            <el-input v-model="updateform.remark" placeholder="请输入" class="i-input"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>

                <el-col :span="Number('12')">
                    <el-form-item label="网址" prop="website">
                        <el-input v-model="updateform.website" placeholder="请输入" class="i-input"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        <!-- 修改确认框 -->
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateFormVisible = false">取消</el-button>
                <el-button type="primary" @click="updateok">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

 


    <!-- 信息表格 -->
    <el-table :data="state.tableData" style="width: 100% ;" :show-overflow-tooltip=true>
        <el-table-column prop="id" label="序号" >
          <template #default="{ $index }">
           {{ (state.pageInfo.pageNum - 1) * state.pageInfo.pageSize + $index + 1 }}
          </template>
    
        </el-table-column>
        <el-table-column prop="name" label="公司名称" />
        <el-table-column prop="shortName" label="公司简称" />
        <el-table-column prop="companyType" label="公司种类" />
        <el-table-column prop="companyPrincipal" label="公司负责人" />
        <el-table-column prop="principalPhone" label="负责人电话" />
        <el-table-column prop="admin" label="公司管理员" />
        <el-table-column prop="adminPhone" label="管理员电话" />
        <el-table-column prop="phone" label="公司电话" />
        <el-table-column prop="website" label="公司官网" />
        <el-table-column prop="address" label="企业地址"/>
        <el-table-column prop="remark" label="备注信息"/>
        <el-table-column label="操作" :show-overflow-tooltip=false>
            
            <template #default="{ row }">
                <!-- scope.row 表示当前行的数据 -->
                <router-link to="warehouseManagement">
                    <a href="">库房</a>              
                </router-link>
                <router-link to="hostManagement">
                    <a href="">主机</a>
                </router-link>
                <router-link to="instrumentManagement">
                    <a href="">仪表</a>
                </router-link>
                <a href="javascript:void(0)" @click="dele(row.id)">删除</a>
                <a href="javascript:void(0)" @click="update(row.id)">修改</a>
            </template>
        </el-table-column>
    </el-table>


    <!-- 分页 -->
    <div class="demo-pagination-block">
    <!-- <div class="demonstration">All combined</div> -->
    <el-pagination
      v-model:current-page="state.pageInfo.pageNum"
      v-model:page-size="state.pageInfo.pageSize"
      :page-sizes="[5, 10, 15, 20,25,30]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="state.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

    <!-- 分页部分 -->
    <!-- <div class="example-pagination-block">
        <el-pagination background layout="prev, pager, next" :total="state.total" :current-page="state.pageInfo.pageNum"
            @current-change="getPage" />
    </div> -->
</template>

<style scoped>
/* 分页样式 */
.example-pagination-block {
  margin-top: 10px;
  float: right;
}
a {
color: blue;
margin-left: 7px;
font-size: 17px;
}
.mb-4{
    display: inline-block;
    margin: 5px;
    float:right;
}
.input {
    display: inline-block;
    margin: 5px;
    float: right;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
/* .example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}
.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
} */

.i-input{
    width: 300px;
    display: inline;
}
</style>